Component({
  // options: {
  //   styleIsolation: "shared",
  // },

  // 注意：如果styleIsolation的属性值为shared，则externalClasses属性选项会失效
  // externalClasses: ["checkbox", "checkbox-checked"],

  // 组件的属性列表：组件的对外属性，主要用于组件使用者传递给组件内部的属性及数据
  properties: {
    // 接收组件使用者传递的数据
    // 方式一：简写
    // label: String,
    // 方式二：全写
    label: {
      // type 组件使用者传递数据的类型
      type: String, // String|Number|Boolean|Object|Array|Null(不限制类类型)
      value: "", // 设置默认值
    },
    position: {
      type: String,
      value: "right",
    },
    // 复选框组件是公共组件，需要在多个页面中使用，不同页面的默认选中不同
    // 设置复选框默认未被选中，父组件可以传递属性控制复选框是否选中
    checked: {
      type: Boolean,
      value: false,
    },
  },

  // 用来定义当前组件内部所需要使用的数据
  data: {
    // // 控制复选框是否选中
    isChecked: false,
  },

  // 通过监视器将properties中的数据赋值给data中的数据
  observers: {
    checked: function (newValue) {
      this.setData({
        isChecked: newValue,
      });
    },
  },

  // 组件的方法列表
  methods: {
    // 点击复选框的事件
    updateChecked() {
      // this.setData({
      //   isChecked: !this.data.isChecked,
      //   // 修改 properties 中的数据也需要通过 this.setData进行修改
      //   label: "在组件内部也可以修改properties中的数据",
      // });
      // 在方法中获取 properties 中的属性
      // console.log(this.properties.label);
      // 在js中可以访问和获取properties中的数据，但不建议进行修改，因为会造成数据流的混乱
      // console.log(this.data.isChecked);
      // 目前复选框的状态存储在当前组件中，使用自定义事件将数据传递给父组件
      this.triggerEvent("change-checked", this.data.isChecked);
    },
  },
});
